<template>
  <div class="vue-axios clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">安装使用</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            import axios from 'axios'<br>
            import promise from 'es6-promise'<br>
            <br>
            Vue.prototype.axios = axios<br>
            // axios兼容ie9<br>
            promise.polyfill()<br>
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">get封装</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            export function get (url, params = {}) {<br>
              &nbsp;&nbsp;return new Promise((resolve, reject) => {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;axios.get(url, {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;params: params<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;})<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;.then(response => {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (response.status === 200) {<br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(response.data)<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {<br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(response.data.message)<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;})<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;.catch(error => {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(error)<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;})<br>
              &nbsp;&nbsp;})<br>
            }<br>
            <br>
            import { get} from './http'<br>
            Vue.prototype.$get = get
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">post封装</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            export function post (url, data = {}) {<br>
              &nbsp;&nbsp;return new Promise((resolve, reject) => {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;axios.post(url, data).then(<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response => {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (response.status === 200) {<br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(response.data)<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {<br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(response.data.message)<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error => {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(error)<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
                &nbsp;&nbsp;&nbsp;&nbsp;)<br>
              &nbsp;&nbsp;})<br>
            }<br>
            <br>
            import { post} from './http'<br>
            Vue.prototype.$post = post
          </code>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16">请求拦截</span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
          axios.interceptors.request.use(<br>
            &nbsp;&nbsp;config => {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;return config;<br>
            &nbsp;&nbsp;},<br>
            &nbsp;&nbsp;err => {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;return Promise.reject(err);<br>
            &nbsp;&nbsp;}<br>
          );
          </code>
        </div>
      </el-card>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'VueAxios'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-axios{
  margin: 0 auto;
  overflow: hidden;
  .main{
    column-count: 2;
    column-gap:10px;
    padding: 10px;
  }
  .el-card{
    margin: 10px 0;
  }
  .el-card__header{
    padding: 0 10px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    line-height: 30px;
  }
}
</style>
